<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>保险智能分析系统</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="libs/bootstrap/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="libs/bootstrap/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="libs/bootstrap/build.css">
<script type="text/javascript" src="libs/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="libs/bootstrap/bootstrap.min.js"></script>
<style>
	body,h3,p,input{margin: 0;padding: 0;font-family: '微软雅黑';}
	a{text-decoration: none;}	
	img{
		border: 0;
	}
	.checkbox-inline, .radio-inline{
		padding-left: 0;
	}
	body{
		width: 100%;
		background-image: url('image/BG.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;		
	}
	.navbar{ 
		background: #ffffff; 
		color: #666666; 
		font-weight: normal;
		border-bottom: 1px solid #e7e7e7;
	}
	.navbar-header{
		float:none;
	}
	.navbar h3{
		font-size: 20px;
		font-weight: bold;
		line-height: 50px;
		letter-spacing: 1px;
		text-align: center;
	}
	.navbar h3 span{
		font-weight: normal;
		padding-left: 10px;
		margin-left: 10px;
		border-left: 1px solid #999999;
	}	
	.navbar a{
		color: #747474;
		font-size: 20px;
		position:absolute;
		top:15px;
		left:10px;
	}
	.navbar a:focus,.navbar a:hover{
		text-decoration: none;
	}	
	.con{
		width: 100%;
		overflow-y: auto;
	}
	.con .container .title{
		color: #666666;
		font-size: 35px;
		letter-spacing: 2px;
		padding-bottom: 40px;
	}
	.con .container .left_label{
		color: #666666;
		font-size: 22px;
		padding-left: 0;
		height: 34px;
		line-height: 34px;		
	}
	.con .container .big_label{
		font-size: 18px;		
		height: 22px;
		line-height: 22px;
	}
	.con .container .row{
		padding-bottom: 20px;
	}	
	.con .row input[type="text"]{
		width: 100%;
		height: 34px;
		line-height: 34px;
		border: 1px solid #ddd;
	}
	.con .row select{
		width: 100%;
		height: 34px;
		border: 1px solid #ddd;
	}	
	.con .row .radio_div{
		padding: 8px 0 0 15px;
	}
	.con .row .btn_div{
		padding-top: 20px;
		text-align: center;
	}
	.con .row .btn_div a{
		display: block;
		width: 160px;
		color: #fff;
		font-size: 18px;
		height: 42px;
		line-height: 42px;
		margin: 0 auto;
		background: #7189a9;
		border-radius: 25px;
	}	
	.con .row .short_input{
		width: 65px !important;
	}
	.foot{
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 70px;
	}
	.foot_con{
		width: 75%;
		margin: 0 auto;
	}
	.flex_div{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}	
	.line_div{
		width: 80px;
		height: 100px;
		background: url('image/line.png') no-repeat center/80px 12px;
	}
	.foot div.Label{
		color: #fba372;
		font-size: 22px;
		width: 92px;
		height: 92px;
		border: 4px solid #fcb38b;
		border-radius: 100px;
		box-sizing: content-box;
	}
	.foot div.Label_active{
		color: #fff;
		background: #f9752b;
	}	
	.foot .Label div{
		width: 92px;
		height: 46px;
		text-align: center;
	}
	.foot .top_p{
	    display: table-cell;
	    text-align: center;
	    vertical-align: bottom;		
	}
	.foot .bottom_p{
		vertical-align: top;
	}
	.end{
		color: #bdbdbd;
		font-size: 16px;
		text-align: center;
		letter-spacing: 2px;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 15px;
	}
	/*单选按钮颜色*/
	.radio-info input[type="radio"]:checked + label::after{
		background-color:#f88f59;
	}	
</style>
</head>
<body>
	<nav class="navbar">
		<div class="container">
			<div class="navbar-header">
				<h3 class="text-center">招商银行<span>智能分析</span></h3>
				<a href="javascript:void(0)" onClick="javascript :history.go(-1);"
					class="glyphicon glyphicon-chevron-left"></a>
			</div>
		</div>
	</nav>
	<div class="con">
		<div class="container">
			<p class="text-center title">了解您的基本信息</p>
			<form id="Form">
				<div class="row">
					<div class="left_label col-md-3 col-sm-4 col-xs-5 col-md-offset-3 col-sm-offset-2">您的职业？</div>
					<div class="col-md-3 col-sm-4 col-xs-5">
						<input type="text" name="" id="">
					</div>
				</div>
				<div class="row">
					<div class="left_label col-md-3 col-sm-4 col-xs-5 col-md-offset-3 col-sm-offset-2">您的婚姻状态</div>
					<div class="col-md-2 col-sm-2">
						<div class="radio_div radio radio-info radio-inline">
	                        <input type="radio" id="marryState1" value="0" name="marry">
	                        <label for="marryState1"> 未婚</label>
	                    </div>						
					</div>
					<div class="col-md-2 col-sm-2">
						<div class="radio_div radio radio-info radio-inline">
	                        <input type="radio" id="marryState2" value="1" name="marry">
	                        <label for="marryState2"> 已婚</label>
	                    </div>						
					</div>
				</div>	
				<div class="row">
					<div class="left_label col-md-3 col-sm-4 col-xs-5 col-md-offset-3 col-sm-offset-2">您是否有子女呢？</div>
					<div class="col-md-2 col-sm-2">
						<div class="radio_div radio radio-info radio-inline">
	                        <input type="radio" id="children1" value="0" name="children">
	                        <label for="children1"> 无</label>
	                    </div>						
					</div>
					<div class="col-md-4 col-sm-4">
						<div class="radio_div radio radio-info radio-inline" style="padding-top:0px;">
	                        <input type="radio" id="children2" value="1" name="children">
	                        <label for="children2"> 有</label>
	                    </div>						
						<input type="text" name="" id="" class="short_input">
						 <span>个</span>						
					</div>	
				</div>
				<div class="row">
					<div class="left_label col-md-3 col-sm-4 col-xs-5 col-md-offset-3 col-sm-offset-2">您子女的年龄是？</div>
					<div class="radio_div col-md-2 col-sm-3">
						<span>最大</span>
						<input type="text" name="" id="" class="short_input">
						<span>岁</span>
					</div>
					<div class="radio_div col-md-2 col-sm-3">
						<span>最小</span>
						<input type="text" name="" id="" class="short_input">
						<span>岁</span>						
					</div>	
				</div>
				<div class="row">
					<div class="left_label col-md-3 col-sm-4 col-xs-5 col-md-offset-3 col-sm-offset-2">您自住房屋的情况是？</div>
					<div class="col-md-2 col-sm-3">
						<div class="radio_div radio radio-info radio-inline">
	                        <input type="radio" id="house1" value="0" name="house">
	                        <label for="house1"> 尚未购买房产</label>
	                    </div>	
					</div>
					<div class="col-md-2 col-sm-3">
						<div class="radio_div radio radio-info radio-inline">
	                        <input type="radio" id="house2" value="1" name="house">
	                        <label for="house2"> 有房有贷款</label>
	                    </div>						
					</div>
				</div>
				<div class="row">
					<div class="left_label col-md-3 col-sm-4 col-xs-5 col-md-offset-3 col-sm-offset-2"> </div>
					<div class="col-md-2 col-sm-2">
						<div class="radio_div radio radio-info radio-inline">
	                        <input type="radio" id="house3" value="2" name="house">
	                        <label for="house3"> 无房无贷款</label>
	                    </div>							
					</div>
				</div>	
				<div class="row">
					<div class="left_label col-md-3 col-sm-4 col-xs-5 col-md-offset-3 col-sm-offset-2">您的社保情况是？</div>
					<div class="col-md-2 col-sm-3">
						<div class="radio_div radio radio-info radio-inline">
	                        <input type="radio" id="social_security1" value="0" name="social_security">
	                        <label for="social_security1"> 有</label>
	                    </div>						
					</div>
					<div class="col-md-2 col-sm-3">
						<div class="radio_div radio radio-info radio-inline">
	                        <input type="radio" id="social_security2" value="1" name="social_security">
	                        <label for="social_security2"> 无</label>
	                    </div>
					</div>
				</div>
				<div class="row">
					<div class="left_label big_label col-md-3 col-sm-4 col-xs-5 col-md-offset-3 col-sm-offset-2">您AUM(金融总资产)大概是多少？</div>
					<div class="col-md-3 col-sm-4 col-xs-5">
						<input type="text" name="" id="">
					</div>
					<span style="line-height:34px;">万</span>
				</div>
				<div class="row">
					<div class="left_label big_label col-md-3 col-sm-4 col-xs-5 col-md-offset-3 col-sm-offset-2">您的年收入大概是多少？</div>
					<div class="col-md-3 col-sm-4 col-xs-5">
						<select name="" id="">
							<option value="0">10万</option>
							<option value="1">100万</option>
						</select>						
					</div>
				</div>
				<div class="row">
					<div class="left_label big_label col-md-3 col-sm-4 col-xs-5 col-md-offset-3 col-sm-offset-2">您是否需要在经济上赡养父母的退休生活？</div>
					<div class="col-md-2 col-sm-3">
						<div class="radio_div radio radio-info radio-inline">
	                        <input type="radio" id="isGive1" value="1" name="isGive">
	                        <label for="isGive1"> 是</label>
	                    </div>						
					</div>
					<div class="col-md-2 col-sm-3">
						<div class="radio_div radio radio-info radio-inline">
	                        <input type="radio" id="isGive2" value="0" name="isGive">
	                        <label for="isGive2"> 无</label>
	                    </div>
					</div>
				</div>
				<div class="row">
					<div class="btn_div"><a href="financial_plan.html">下一步</a></div>
				</div>
			</form>
		</div>
	</div>
    <div class="foot">
    	<div class="foot_con">
    		<div class="flex_div">
		     	<div class="Label">
		   			<div class="top_p">基础</div>
		   			<div class="bottom_p">信息</div>
		   		</div>
		   		<div class="line_div"></div>
		    	<div class="Label Label_active">
		   			<div class="top_p">定性</div>
		   			<div class="bottom_p">分析</div>
		   		</div>
		   		<div class="line_div"></div>
		    	<div class="Label">
		   			<div class="top_p">定量</div>
		   			<div class="bottom_p">分析</div>
		   		</div>
		   		<div class="line_div"></div>
		    	<div class="Label">
		   			<div class="top_p">诊断</div>
		   			<div class="bottom_p">分析</div>
		   		</div>    			
    		</div>
    	</div>
    </div>
    <p class="end">版权归信诚人寿所有</p>
</body>
<script>
	$(function(){
		var _height = $(window).height();
		var give_height = _height-250;
		console.log(give_height);
		$('.con').css('height',give_height+'px');
	});
</script>
</script>
</html>